 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:p="http://primefaces.org/ui" >

<h:head>
    <link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.ico"/>
    <link type="text/css" rel="stylesheet"
		href="#{request.contextPath}/resources/css/styles.css" />
    <title>Registration</title>
</h:head> 
<body>
    <div id="leftWel">
            <img src="#{request.contextPath}/resources/images/Home_logo.png" 
                 alt="Welcome to MeteoCal" width="600px"/>
        </div>
    <div id="registerWel">
	<div id="inner-wrap">
		<div id="content">
			<p:panel header="Registration">
				<p:growl id="meteocalMsg" life="3000"  showDetail="true" />
					<h:form>
                                            <b>Access Information:</b>
                                            <br />
                                            <br />
                                            <h:panelGrid columns="3" id="matchPassword" columnClasses="column"
						cellpadding="6">
                                            <h:outputLabel style="width: 300px;" for='usrUsername1'
                                            	value='*Username:' />
                                            <p:inputText id='usrUsername1' label="Username" 
						value='#{userBean.user.username}' required='true'
						requiredMessage="Value is required">
					    </p:inputText>
                                            <p:message for="usrUsername1" />
						<h:outputLabel for='usrPass1' value='*Password:' />
						<p:password id='usrPass1' value='#{userBean.user.password}'
							label="Password" feedback="true" match="usrPass2" required='true'
							requiredMessage="Value is required">
						</p:password>
                                            <p:message for="usrPass1" />
						<h:outputLabel for='usrPass2' value='*Confirm Password:' />
						<p:password id='usrPass2' value='#{userBean.user.password}'
								label="Confirmed Password" feedback="false" required='true'
								requiredMessage="Value is required">
						</p:password>
					    <p:message for="usrPass2" />
					     </h:panelGrid>
						<br />
						<b>Personal Information: </b>
						<br />
						<br />
						<h:panelGrid columns='3' columnClasses="column" cellpadding="6">
                                                                  
							<h:outputLabel for='usrName' value='Name:' />
							<p:inputText id='usrName' value='#{userBean.user.name}' required='false'
								requiredMessage="Value is required" />
							<p:message for="usrName" />
                                                        
							<h:outputLabel for='usrSurname' value='Surname:' />
							<p:inputText id='usrSurname' value='#{userBean.user.surname}' required='false'
								requiredMessage="Value is required" />
							<p:message for="usrSurname" />
                                                                                                                
                                                        <h:outputLabel for='usrEmail' value='Email:' />
							<p:inputText id='usrEmail' label="Email"
								value='#{userBean.user.email}' required='false'
								requiredMessage="Value is required"
								validatorMessage="Invalid Email">
								<f:validateRegex pattern="[a-zA-Z0-9]+@[a-zA-Z]+.[a-zA-Z]{2,3}"></f:validateRegex>
							</p:inputText>
                                                        <p:message for="usrEmail" />
                                                        
							<h:outputLabel for='usrPhone' value='Phone:' />
							<p:inputText id='usrPhone' value='#{userBean.user.phone}'
							required='false'
								requiredMessage="Value is required"
								validatorMessage="Invalid Phone Number,Only numbers are valid">
								<f:validateRegex pattern="[0-9]*"></f:validateRegex>
							</p:inputText>
							<p:message for="usrPhone" />
                                                                                                              
							<p:commandButton id="register" action="#{userBean.register()}"
								update="matchPassword" value='Register' type="submit"
								ajax="false" styleClass="block" />                
						</h:panelGrid>                                            
					</h:form>
				</p:panel>
                                 <h:form id="backHome">
                                <p:commandButton id="backHome" action="#{loginBean.goToIndex()}"
								value='Back Home' ajax="false"/>
                                </h:form>
                    </div>
		</div>
	</div>
</body>
</html>
